<template>
	<w-container class=" plr-16 pb-15">
		<w-navbar id="my-nav" title="我的委托" bgColor="#fff"></w-navbar>
		<u-tabs :list="statusList" :current='currentIndex' :scrollable='false' :activeStyle="{color:'#1952F8'}"
			inactiveStyle='font-size:28rpx' lineHeight='0' @click='changeStatus'></u-tabs>
		<view class="">
			<view class="bg-color-item flex pa-12 br-12 mb-12" v-for="(item,index) in list" :key="item.id"
				@click="toDetail(item)">
				<w-image :src='item.goods_image' width="80" height="80" radius="8"></w-image>
				<view class="pl-10 flex-1 flex flex-dir-col flex-js-sb">
					<view class="flex flex-js-sb flex-ai-center">
						<view class="text-overflow font-color-textPrimary" style="max-width: 300rpx;">
							{{item.goods_name && handleLang(item.goods_name)}}
						</view>
						<view class="font-color-textPrimary">
							<text class="font-size-14">￥</text>
							<text class="font-size-20">{{item && item.total_price}}</text>
						</view>
					</view>
					<view class="" v-if="(item.order_status==2|| item.order_status==3)&&item.number>1">
						<u-line-progress inactiveColor='#DEE8FF' style="width: 236rpx;"
							:percentage="(item.sale_number/item.number)*100" activeColor="#f52500" :showText='false'
							height="8rpx"></u-line-progress>
						<view class="font-size-10 font-color-999 mt-4">
							{{handleLang('委托数量')}}：{{item.sale_number}}/{{item.number}}
						</view>
					</view>
					<view class="font-size-14 font-color-999" v-else>
						x{{item.number}}
					</view>

					<view class="flex flex-js-sb flex-ai-center">
						<text class="font-size-10 font-color-999">{{item.updatetime|formatDate}}</text>
						<view class="flex">
							<w-button v-if="item.order_status==2" size="mini" pain shape="circle"
								style="font-size: 24rpx;"
								@click.native.stop='cancelOrder(item,index)'>{{handleLang('取消委托')}}</w-button>
							<w-button v-if="item.order_status==1" size="mini" shape="circle" style="font-size: 24rpx;"
								@click.native.stop='pay(item,index)'>{{handleLang('立即支付')}}</w-button>
							<w-button v-if="item.order_status==4" size="mini" shape="circle" style="font-size: 24rpx;"
								@click.native.stop='toBeg(item)'>{{handleLang('重新委托')}}</w-button>
						</view>
					</view>

				</view>
			</view>
		</view>
		<w-loading :type="loading" empty-type="search"></w-loading>
		<w-toast v-model="cancelShow" :title="handleLang('取消委托')"
			:content="handleLang('取消委托只能取消未完成的委托订单，确认取消委托吗？')" content-align="center" @action='cancelFn'
			:cancelText="handleLang('我再想想')" :submitText="handleLang('确认取消')"></w-toast>
		<u-popup :show='payShow' mode='bottom' :closeOnClickOverlay='true' :round='12' :safeAreaInsetBottom='false'
			bgColor='transparent' @close='confirmClose'>
			<view class="plr-16 pt-16 batch br-t-12">
				<view class="text-center  font-w-600 font-size-16 color flex flex-ai-center flex-js-center">
					<text class="flex-1 ml-12">委托支付</text>
					<w-icon name="close1" size="24" @click="payShow = false"></w-icon>
				</view>

				<view v-if="this.list.length && this.currentOrderIndex >= 0" class="font-size-16 color font-w-500 text-center mt-20">￥ <text
						class="font-size-24 font-w-bold">{{this.list[this.currentOrderIndex].total_price}}</text> </view>
				<view class="mt-20">
					<view class="font-size-16 color font-w-500">支付方式</view>
					<view class="flex flex-js-sb mlr-8 ptb-12" v-for="item in basePayList" :key="item.able"
						style="border-bottom:1px solid rgba(255, 255, 255, 0.2);">
						<view class="flex flex-ai-center">
							<w-icon size="18" :name="item.icon"></w-icon>
							<text class='ml-8'
								:class="item.able&&item.check?'font-color-textPrimary':'font-color-999'">{{handleLang(`${item.name}钱包`)}}</text>
						</view>
						<w-icon v-if="item.able" name="checked-icon" size="20"></w-icon>
						<!-- <w-icon v-else name="uncheck-icon" size="20"></w-icon> -->
						<w-button v-if="!item.able" type="colorful" size="mm" shape="circle"
							:disabled="!userInfo.real_name_authentication"
							@click='toOpen(item)'>{{handleLang('去开通')}}</w-button>
					</view>
				</view>
				<w-button class="mt-32" shape="circle" @click='submitPay'>立即支付</w-button>
			</view>
		</u-popup>
	</w-container>
</template>

<script>
	import { entrustOrderList,cancelEntrustOrder } from '@/api/trad/index.js'
	import CancelBegOrder from '../components/CancelBegOrder.vue'
	import PayBegOrder from '@/pages/market/components/PayBegOrder.vue'
	import goods from '../../../store/modules/goods'
	import { basePayList } from '@/config/index.js'
	import PayUtil from '@/utils/payUtil.js'
	export default {
		components: {
			CancelBegOrder,
			PayBegOrder
		},
		data() {
			return {
				currentOrderIndex: -1,
				basePayList,
				loading: 'none',
				statusList: [{
						name: "全部",
						status: null
					},
					{
						name: "委托中",
						status: 2
					},
					{
						name: "已成交",
						status: 3
					},
					{
						name: "已取消",
						status: 4
					},
					{
						name: "已退款",
						status: 6
					}
				],
				search: {
					page: 1,
					status: null
				},
				cancelShow:false,
				payShow: false,
				list: []
			}
		},
		computed: {
			currentIndex() {
				return this.statusList.findIndex(v => v.status === this.search.status)
			}
		},
		onLoad() {
			this.getList(this.search)
		},
		onPullDownRefresh() {
			this.loading = 'none'
			let search = this.$tools.copyObj(this.search)
			search.page = 1
			this.list = []
			this.getList(search)
		},
		onReachBottom() {
			let search = this.$tools.copyObj(this.search)
			search.page++
			this.getList(search)
		},
		methods: {
			toBeg({
				goods_id
			}) {
				uni.navigateTo({
					url: `/pages/market/marketGoodsList?id=${goods_id}&goodsType=2&currentType=2`
				})
			},
			cancelOrder(item, index) {
				this.currentOrderIndex = index;
				this.cancelShow = true
			},
			cancelFn(e){
				if(!e) return this.cancelShow = false
				let orderItem = this.list[this.currentOrderIndex]
				if(!orderItem?.id) {
					return uni.showToast({
						title:'订单不存在',
						icon:"none"
					})
				} 
				uni.showLoading({
					title:'取消中...'
				})
				cancelEntrustOrder({order_id:orderItem.id}).then( res => {
					uni.showToast({
						title:res.msg,
						icon:'success'
					})
					setTimeout(() => {
						this.search.page = 1
						this.list = []
						this.loading = 'none'
						this.getList(this.search)
					},1000)
				})
			},
			toDetail({
				id
			}) {
				uni.navigateTo({
					url: '/pages/order/entrust/info?id=' + id
				})
			},
			pay(item, index) {
				this.currentOrderIndex = index;
				this.payShow = true
			},
			submitPay() {
				let orderItem = this.list[this.currentOrderIndex]
				new PayUtil({
					pay_type: 4,
					order_number: orderItem?.order_sn,
					order_type: 12,
					pay_way: this.basePayList[0].pay_way,
					order_id: orderItem?.id
				})
			},
			changeStatus({
				status
			}) {
				this.search.status = status;
				this.search.page = 1
				this.list = []
				this.loading = 'none'
				this.getList(this.search)
			},
			getList(search) {
				if (this.loading == 'loading' || this.loading == 'nomore') return;
				this.loading = 'loading'
				entrustOrderList(search).then(res => {
					uni.stopPullDownRefresh()
					this.loading = 'none'
					if (res.data.data.length) {
						this.search = search;
					}
					this.list = this.list.concat(res.data.data)
					if (res.data.data.length < res.data.per_page) {
						this.loading = 'nomore'
					}
					if (!res.data.total) {
						this.loading = 'empty'
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.batch {
		background: $item-bg-color;
		padding-bottom: calc(14rpx + env(safe-area-inset-bottom));

		.item {
			width: 100%;
			border: 3rpx solid #eee;

			.lable {
				@extend .font-color-999, .font-w-500;
			}
		}

		.price-limit {
			&-inp {
				width: 100rpx;
				@extend .text-center, .mlr-2, .font-w-500, .font-color-main-text;
			}
		}
	}
</style>